<script setup >
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { postMemberAddressAPI, getMemberAddressByIdAPI, putMemberAddressAPI } from '../../services/address'

// 表单数据
const form = ref({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: '', // 省市区(前端展示)
  provinceCode: '', // 省份编码(后端参数)
  cityCode: '', // 城市编码(后端参数)
  countyCode: '', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0, // 默认地址，1为是，0为否
})
// 定义校验规则
const rules = {
  receiver: {
    rules: [{ required: true, errorMessage: '请输入收货人姓名' }],
  },
  contact: {
    rules: [
      { required: true, errorMessage: '请输入联系方式' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' }
    ]
  },
  fullLocation: {
    rules: [{ required: true, errorMessage: '请选择所在地区' }],
  },
  address: {
    rules: [{ required: true, errorMessage: '请选择详细地址' }],
  },
}
// 表单ref引用
const formRef = ref()
// 获取页面参数
const query = defineProps({
  id: String,
})
// 动态设置标题
uni.setNavigationBarTitle({ title: query.id ? '修改地址':'新增地址', })
// 修改地址
const onChangeRegion = (event) => {
  const { code, value } = event.detail
  // 前端展示
  form.value.fullLocation = value.join(' ')
  // 服务器端
  form.value.provinceCode = code[0]
  form.value.cityCode = code[1]
  form.value.countyCode = code[2]
}
// 修改默认地址
const changeSwitch = (ev) => {
  const { value } = ev.detail
  form.value.isDefault = value ? 1 : 0
}
// 保存提交事件
const onSubmit = async () => {
  // 表单校验
  try{
    await formRef.value.validate()
  } catch (error) {
    return console.log(error)
  }
  // 发请求
  if (query.id) {
    await putMemberAddressAPI(query.id, form.value)
  } else {
    await postMemberAddressAPI(form.value)
  }
  // 提示成功
  uni.showToast({ icon: 'success', title: '操作成功' })
  // 跳转
  setTimeout(() => {
    uni.navigateBack()
  }, 400)
}
// 根据id获取地址信息
const getMemberAddressByIdData = async () => {
  const { result } = await getMemberAddressByIdAPI(query.id)
  Object.assign(form.value, result)
}
// 初始化调用
onLoad(() => {
  if (query.id) getMemberAddressByIdData(query.id)
})

</script>

<template>
  <view class="content">
    <uni-forms ref="formRef" :modelValue="form" :rules="rules">
      <!-- 表单内容 -->
      <uni-forms-item class="form-item" name="receiver">
        <text class="label">收货人</text>
        <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
      </uni-forms-item>
      <uni-forms-item class="form-item" name="contact">
        <text class="label">手机号码</text>
        <input class="input" placeholder="请填写收货人手机号码" v-model="form.contact" />
      </uni-forms-item>
      <uni-forms-item class="form-item" name="fullLocation">
        <text class="label">所在地区</text>
        <picker class="picker" @change="onChangeRegion" mode="region" :value="fullLocation?.split(' ')">
          <view v-if="form.fullLocation">{{form.fullLocation}}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </uni-forms-item>
      <uni-forms-item class="form-item" name="address">
        <text class="label">详细地址</text>
        <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
      </uni-forms-item>
      <uni-forms-item class="form-item" name="isDefault">
        <label class="label">设为默认地址</label>
        <switch class="switch" @change="changeSwitch" color="#27ba9b" :checked="form.isDefault === 1" />
      </uni-forms-item>
    </uni-forms>
  </view>
  <!-- 提交按钮 -->
  <button class="button" @click="onSubmit">保存并使用</button>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>